<template>
  <div class="app-container" style="height: 100%;" ref="consDom">
    <el-row :gutter="10">
      <!-- <el-col :span="4" :xs="24">
				<el-card> -->
      <!-- tree树形控件 -->
      <!-- <div class="head-container">
						<el-input v-model="deptName" :placeholder="$t('program.send.input.department')" clearable
							size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
					</div>
					<el-scrollbar style="height:70vh;">
						<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="true" ref="tree"
							accordion node-key="id" :default-expanded-keys="expandedKeys" highlight-current
							:filter-node-method="filterNode" @node-click="handleNodeClick" />
					</el-scrollbar>	
				</el-card>
			</el-col> -->
			<el-col :span="24" :xs="24">
				<div ref='colDom' style="position: absolute;height: 100%;"></div>
				<!-- form -->
				<div class="devList-top">
					<span>{{$t('program.send.label.number')}}</span>
					<el-form :model="form">
						<el-form-item prop="deptId">
							<treeselect v-model="form.deptId" :options="mapTreeData" :show-count="true" @input='treeValueChange'
								:placeholder="$t('program.send.input.number')" style='width: 300px;' :disableFuzzyMatching='true'/>
						</el-form-item>
						<!-- 查询 -->
					</el-form>
				</div>
				
				<el-row>
					
					<el-form inline ref="queryForm" :model="queryParams" v-show="showSearch">
						<!-- 设备名称 -->
						<el-form-item :label="$t('program.send.label.name')" prop="fDescription" style='widht:275px;position: absolute;left:390px;top: -42px;'>
							<el-input v-model="queryParams.fDescription" :placeholder="$t('program.send.input.name')"
								 clearable maxlength="12"></el-input>
						</el-form-item>
						<!-- 发送状态 -->
						<el-form-item :label="$t('program.send.label.status')" prop="taskStatus" style='width:275px;position: absolute;left:670px;top: -42px;'>
							<el-select v-model="queryParams.taskStatus" clearable
								:placeholder="$t('program.send.input.all')"
								style="text-align: center;text-align-last: center;">
								<el-option style="text-align: center;text-align-last: center"
									v-for="item in statusOptions" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<!-- 创建时间 -->
						<el-form-item :label="$t('program.send.label.time')">
							<el-date-picker v-model="dateRange"  value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
								range-separator="-" :start-placeholder="$t('program.send.date.startTime')"
								:end-placeholder="$t('program.send.date.startTime')"></el-date-picker>
						</el-form-item>
						<!-- button -->
						<el-form-item>
							<!-- 搜索 -->
							<el-button type="primary"  icon="el-icon-search" @click="handleQuery"
								v-hasPermi="['lgsv:send:query']">{{$t('program.send.button.search')}}</el-button>
							<!-- 重置 -->
							<el-button type="info" plain  icon="el-icon-refresh"
								v-hasPermi="['lgsv:send:reset']" @click="resetQuery">{{$t('program.send.button.reset')}}
							</el-button>
						</el-form-item>
					</el-form>
					<!-- 隐藏搜索 刷新 显隐列工具 
        columns:显隐列做筛选功能
        -->
        </el-row>
        <el-row class="mb5">
          <!-- <el-col :span="20"> -->
          <!-- 删除 -->
          <!-- <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:user:remove']"
              >删除</el-button
            > -->
          <!-- 导出 -->
          <!-- <el-button
              type="warning "
              plain
              size="mini"
              :disabled="multiple"
              icon="el-icon-download"
              v-hasPermi="['lgsv:send:export']"
              >导出</el-button
            > -->
					<!-- </el-col> -->
					<!-- <el-col :span="4"> -->
					<right-toolbar :showSearch.sync="showSearch" :columns="columns" @queryTable="getTaskList">
					</right-toolbar>
					<!-- </el-col> -->
				</el-row>
				<!-- tableData -->
				<u-table 
					ref="multipleTable" 
					:big-data-checkbox="checked"
					:row-height="storeTableHeight"
					row-key="id"
					use-virtual
					fixed
					style="width: 100%;" 
					v-if='isTable'
					:max-height="tableHeight" 
					v-loading="loading"
					highlight-current-row 
					border 
					:default-sort="{ prop: 'addTime', order: 'descending' }"
					@selection-change="handleSelectionChange">
					<!-- checkbox多选框  align="center"-->
					<u-table-column type="selection" width="40" align="center" />
					<!-- 设备号 -->
					<u-table-column prop="fNumber" :label="$t('program.send.table.number')" width="130" align="center"
						sortable v-if="columns[0].visible">
					</u-table-column>
					<!-- 设备名称 -->
					<u-table-column prop="fDescription" :label="$t('program.send.table.name')" width="125"
						align="center" v-if="columns[1].visible" show-overflow-tooltip>
					</u-table-column>
					<!-- 节目号 -->
					<u-table-column prop="pNo" :label="$t('program.send.table.PNum')" width="70" align="center"
						v-if="columns[2].visible">
					</u-table-column>
					<!-- 命令码 -->
					<!-- <u-table-column prop="lgCmd.fCmd" :label="$t('program.send.table.fCmd')" width="70" align="center"
						v-if="columns[3].visible">
					</u-table-column> -->
					<!-- 命令名称 -->
					<u-table-column prop="lgCmd.fName" :label="$t('program.send.table.fName')" width="110"
						align="center" v-if="columns[4].visible">
					</u-table-column>
					<!-- 发送进度 -->
					<u-table-column prop="taskBag" :label="$t('program.send.table.taskBag')" width="80" align="center"
						v-if="columns[5].visible">
					</u-table-column>
					<!-- 状态 -->
					<u-table-column prop="taskStatus" :label="$t('program.send.table.taskStatus')" width="80"
						align="center" sortable :formatter="statusFormatter" v-if="columns[6].visible">
					</u-table-column>
					<!-- 错误信息 -->
					<u-table-column prop="taskResult" :label="$t('program.send.table.taskResult')"
						show-overflow-tooltip align="center" v-if="columns[7].visible">
					</u-table-column>
					<!-- 发布者 -->
					<u-table-column prop="userName" :label="$t('program.send.table.userName')" align="center"
						v-if="columns[8].visible">
					</u-table-column>
					<!-- 时间 -->
					<u-table-column prop="addTime" :label="$t('program.send.table.addTime')" align="center"
						width="160px" sortable v-if="columns[9].visible">
					</u-table-column>
				</u-table>
				<!-- 分页器 -->
				<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize" @pagination="getTaskList" />
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import {
		getDev
	} from "@/api/system/map"
	import {
		taskList
	} from '@/api/EditorProgram/dataList' // import taskList api
	import {
		treeselect
	} from '@/api/system/dept' // import treeselect api
	import Treeselect from '@riophae/vue-treeselect' // import the component
	import '@riophae/vue-treeselect/dist/vue-treeselect.css' // import the styles
	export default {
		name: 'SendRecord',
		components: {
			Treeselect //注册组件
		},
		data() {
			return {
				checked:true,
				storeTableHeight:45,
				form:{
					deptId:undefined
				},
				quer2:{
					deptId:undefined
				},
				mapTreeData:[],
				isTable:false,
				tableHeight:0,
				loading: false, // 遮罩层
				deptOptions: undefined, // 部门树选项
				showSearch: true, // 显示搜索条件
				total: 0, // 页码总条数
				deptName: undefined,
				sendList: [], // 发送列表
				dateRange: [], // 日期范围
				multiple: true, // 非多个checkbox禁用
				ids: [], // 多选checkbox选择的值
				// 发送记录查询模型
				queryParams: {
					deptId: undefined, // 部门id
					fNumber: undefined, // 设备编号
					fDescription: undefined, // 设备名称
					taskStatus: undefined, // 默认发送状态
					beginTime: undefined, // 开始时间
					endTime: undefined, // 结束时间
					pageNum: 1, // 页码
					pageSize: 20 // 条数
				},
				defaultProps: {
					children: 'children', // 指定子树为节点对象的某个属性值
					label: 'label' // 指定节点标签为节点对象的某个属性值
				},
				// 表格显隐列信息
				columns: [{
						key: 0,
						label: `设备号`,
						visible: true
					},
					{
						key: 1,
						label: `设备名称`,
						visible: true
					},
					{
						key: 2,
						label: `节目号`,
						visible: true
					},
					{
						key: 3,
						label: `命令码`,
						visible: true
					},
					{
						key: 4,
						label: `命令名称`,
						visible: true
					},
					{
						key: 5,
						label: `进度(%)`,
						visible: true
					},
					{
						key: 6,
						label: `状态`,
						visible: true
					},
					{
						key: 7,
						label: `错误信息`,
						visible: true
					},
					{
						key: 8,
						label: `发布者`,
						visible: true
					},
					{
						key: 9,
						label: `时间`,
						visible: true
					}
				],
				// 下拉发送状态
				statusOptions: [{
						value: 0,
						label: this.$t('program.send.select.wait') // 等待发送
						// $t('program.send.table.addTime')
					},
					{
						value: 4,
						label: this.$t('program.send.select.success') // 成功
					},
					{
						value: 10,
						label: this.$t('program.send.select.fail') // 失败
					},
					{
						value: 11,
						label: this.$t('program.send.select.override') // 任务覆盖
					}
				],
				expandedKeys: []
			}
		},
		watch: {
			// 根据名称筛选部门树
			deptName(val) {
				this.$refs.tree.filter(val)
			},
			// 默认展开第二级节点
			deptOptions: {
				handler() {
					this.deptOptions.forEach(item => {
						this.expandedKeys.push(item.id)
					})
				}
			},
			// 'form.deptId': 'currDeptChange',
			"$store.state.deptId": {
			      handler(newval) {
					this.quer2.deptId=newval
					this.queryParams.deptId = newval // 把点击获得的id赋值给queryParams模型i
					this.queryParams.fNumber=this.form.deptId
					this.getTreeselect ()
					this.getTaskList() // 请求数据刷新分页
			      }
			}
		},
		activated(){
			this.storeTableHeight=this.$store.state.tableHeight
			if(this.$store.state.deptId){
				this.quer2.deptId = this.$store.state.deptId // 把点击获得的id赋值给queryParams模型id
				this.queryParams.deptId = this.$store.state.deptId
				this.getTreeselect ()
				this.getTaskList()
			}
		},
		methods: {
			// currDeptChange(val){
			// 	if (val == null || val == undefined || val == '') {
			// 		return
			// 	}
			// 	if(val.length>8){
			// 		this.queryParams.fNumber=val
			// 		this.getTaskList() 
			// 	}else{
			// 		this.queryParams.fNumber=''
			// 		this.form.deptId=undefined
			// 		this.$message({
			// 			showClose: true,
			// 			message:'只能查询设备',
			// 			type: 'warning'
			// 		});
			// 	}	  
			// },
			treeValueChange(val){
				if (val == null || val == undefined || val == '') {
					return
				}
				if(val.length>8){
					this.queryParams.fNumber=val
					this.getTaskList()
				}else{
					this.queryParams.fNumber=''
					this.$message({
						showClose: true,
						message:'只能查询设备',
						type: 'warning'
					});
					let that=this
					setTimeout(function(){
						that.form.deptId=undefined
					},100)
				}
			},
			// 查询部门下拉树结构
			getTreeselect () {
			  getDev(this.quer2)
			    .then(response => {
					// console.log(response.data)
			      this.mapTreeData = response.data
			    }).catch(err => {
			      console.log(err)
			    })
			},
			onSortChange() {},
			// 筛选节点
			filterNode(value, data) {
				if (!value) return true
				return data.label.indexOf(value) !== -1
			},
			getTaskList() {
				this.loading = true // 遮罩层
				taskList(this.addDateRange(this.queryParams, this.dateRange)).then(
					res => {
						if (res.code === 200) {
							this.sendList = res.rows
							this.total = res.total
							this.loading = false
							this.sendList.forEach((item, index) => {
								this.sendList[index].taskBag =
									(item.taskSpeed ? item.taskSpeed : 0) +
									'/' +
									(item.taskBag ? item.taskBag : 0)
							})
							this.$refs.multipleTable.reloadData(this.sendList)
						}
					}
				)
			},
			// 搜索
			handleQuery() {
				this.queryParams.pageNum = 1
				this.queryParams.fNumber=this.form.deptId
				this.getTaskList()
			},
			// 进度条的颜色
			customColorMethod(percentage) {
				if (percentage < 50) {
					return '#f56c6c'
				} else {
					return '#67c23a'
				}
			},
			// 指定进度条文字内容
			format(percentage) {
				// percentage 代表的是每行的数据
				// console.log(percentage, 'percentage')
				if (percentage.row.taskSpeed === null) {
					percentage.row.taskSpeed = 0
				}
			},
			// 表格状态格式化内容
			statusFormatter(row, column, cellValue, index) {
				// console.log(row.taskStatus, index)
				// console.log(cellValue)
				let typeName = ''
				switch (cellValue) {
					case 0:
						typeName = '等待发送'
						break
					case 4:
						typeName = '发送成功'
						break
					case 10:
						typeName = '发送失败'
						break
					case 11:
						typeName = '任务覆盖'
						break
					default:
						break
				}
				return typeName
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.dateRange = [] // 清空日期选择器
				this.resetForm('queryForm')
				this.handleQuery()
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				// const userIds = row.userId || this.ids
				console.log(row)
				// this.$confirm(
				//   '是否确认删除用户编号为"' + userIds + '"的数据项?',
				//   '警告',
				//   {
				//     confirmButtonText: '确定',
				//     cancelButtonText: '取消',
				//     type: 'warning'
				//   }
				// )
				//   .then(function () {
				//     return delUser(userIds)
				//   })
				//   .then(() => {
				//     this.getList()
				//     this.msgSuccess('删除成功')
				//   })
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				// selection 多选选择的每一行数据
				// console.log(selection)
				// this.deptIds = selection.map(item => item.deptId) // 把checkbox选中的部门id赋值给deptIds数组
				this.ids = selection.map(item => item.fNumber) // 把checkbox选中的编号id赋值给ids数组
				this.single = selection.length != 1
				this.multiple = !selection.length
			}
		},
		mounted() {
			this.tableHeight=(this.$refs.consDom.offsetHeight-this.$refs.colDom.offsetHeight-80)
			this.isTable=true
		},
		computed: {}
	}
</script>

<style lang="scss" scoped>
	::v-deep.devList-top {
		height: 45px;
		width:400px;
		display: flex;
		border-radius: 5px;
		line-height: 45px;
		span {
			font-weight: 700;
			font-size: 14px;
		}
		.el-form {
			width:28%;
			top: 3px;
			left:77px;
			z-index: 999;
			position: absolute;
		}
		.vue-treeselect__menu{
			overflow-x: auto;
			width:310px;
		}
		
		.vue-treeselect div, .vue-treeselect span{
		box-sizing:content-box;
		}
	}
</style>
